<template>
    <div>
        <el-form ref="refForm" :model="refForm" :inline="true">
            <el-form-item label="员工名称" prop="userName">
                <el-input placeholder="请输入员工名称" v-model.trim="refForm.userName" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="客户名称" prop="toUserName">
                <el-input placeholder="请输入员工名称" v-model.trim="refForm.toUserName" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="查找内容" prop="content">
                <el-input type="text" placeholder="查找内容" v-model.trim="refForm.content" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="时间范围" prop="timeRange">
                <el-date-picker
                    v-model="refForm.timeRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd "
                    :picker-options="{
                        disabledDate(time) {
                            return time.getTime() > Date.now();
                        }
                    }"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryData">查询</el-button>
                <el-button @click="clearData">清空</el-button>
                <el-button @click="exportList" type="primary">导出列表</el-button>
            </el-form-item>
        </el-form>
        <div class="madp-table">
            <el-table :data="tableData">
                <el-table-column label="发送者" width="90px" align="center" prop="name"></el-table-column>
                <el-table-column label="内容" prop="content">
                    <template slot-scope="scope">
                        <span class="madp-column-content" v-if="scope.row.content.type == 'text'">{{ scope.row.content.content }}</span>
                        <span class="madp-column-content" v-if="scope.row.content.type == 'image'">
                            <img :src="scope.row.content.ossPath" class="madp-column-img" alt />
                        </span>
                        <span class="madp-column-content" v-if="scope.row.content.type == 'link'">{{ scope.row.content.link_url }}</span>
                        <span class="madp-column-content" v-if="scope.row.content.type == 'voice'">
                            <audio :src="scope.row.content.ossPath" controls="controls" autoplay class="madp-chatInfo-audio"></audio>
                        </span>
                        <span class="madp-column-content" v-if="scope.row.content.type == 'video'">
                            <video :src="scope.row.content.ossPath" controls="controls" autoplay class="madp-chatInfo-img"></video>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="发送状态" width="100px" align="center" prop="action"></el-table-column>
                <el-table-column label="发送时间" width="200px" align="center" prop="msgDataTime"></el-table-column>
            </el-table>
        </div>
        <div class="madp-pagination-wrap">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page.current"
                :page-sizes="[10, 20, 30, 50, 100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import { globalRetrieve, exportExcel } from '@/api/enterprise/session-archiving';
import { formatDate2 } from '@/util/util';
export default {
    props: [],
    data() {
        return {
            page: {
                size: 10,
                current: 1,
                total: 0
            },
            value1: '',
            refForm: {
                userName: '',
                toUserName: '',
                content: '',
                timeRange: []
            },
            tableData: [],
            dafaultTime: null
        };
    },
    created() {
        this.dafaultTime = formatDate2();
        this.refForm = {
            userName: '',
            toUserName: '',
            content: '',
            timeRange: [this.dafaultTime, this.dafaultTime]
        };
    },
    mounted() {
        this.getGlobalMeessage();
    },
    methods: {
        getGlobalMeessage() {
            let { userName, toUserName, content, timeRange } = this.refForm;
            let params = {
                current: this.page.current,
                size: this.page.size,
                content,
                userName,
                toUserName
            };
            if (timeRange.length) {
                params.dateTimeStart = timeRange[0];
                params.dateTimeEnd = timeRange[1];
            }
            globalRetrieve(params).then((res) => {
                if (res.data && res.data.code == 0) {
                    this.tableData = res.data.data.records;
                    this.page.total = res.data.data.total;
                }
            });
        },
        queryData() {
            this.page.current = 1;
            this.getGlobalMeessage();
        },
        exportList() {
            let dto = {
                current: this.page.current,
                size: this.page.size,
                content: this.refForm.content,
                dateTimeStart: this.refForm.timeRange[0],
                dateTimeEnd: this.refForm.timeRange[1],
                toUserId: this.refForm.contactId,
                userId: this.refForm.employeeId
            };
            exportExcel(dto).then((res) => {
                const blob = new Blob([res.data], {
                    type: 'application/ms-excel'
                });
                const reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onload = (e) => {
                    const a = document.createElement('a');
                    a.download = '全局检索列表.xls';
                    a.href = e.target.result;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                };
            });
        },
        clearData() {
            this.$refs.refForm.resetFields();
            this.refForm = {
                userName: '',
                toUserName: '',
                content: '',
                timeRange: [this.dafaultTime, this.dafaultTime]
            };
            this.getGlobalMeessage();
        },
        handleSizeChange(val) {
            this.page.size = val;
            this.getGlobalMeessage();
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getGlobalMeessage();
        }
    }
};
</script>
<style lang="scss" scoped>
.madp-column-content {
    display: inline-block;
    background: #0079de;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    flex-wrap: wrap;
}
.madp-pagination-wrap {
    float: right;
    margin: 20px;
}
.madp-column-img {
    background: #2a57a0;
    width: 125px;
    height: 125px;
    padding: 8px;
}
.madp-chatInfo-audio {
    padding: 8px;
    height: 34px;
    border-radius: 8px;
    // background: #2a57a0;
    color: #fff;
    font-size: 15px;
    margin-top: 10px;
}
.madp-chatInfo-img {
    display: block;
    width: 125px;
    height: 125px;
    padding: 8px;
    border-radius: 8px;
    background: #2a57a0;
    color: #fff;
    font-size: 15px;
    margin-top: 10px;
}
/deep/.el-date-editor .el-range-separator {
    width: 7%;
}
.madp-table /deep/.el-table--fit {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    border-bottom: none;
}
</style>
